<template>
	<el-dialog
		class="draw-dialog"
		:title="picDialog.title"
		:visible.sync="picDialog.visible"
		width="60%">
		<div class="tip">请用鼠标在图中框选位置</div>
		<div class="draw-img">
			<canvas ref="drawCanvas" class="draw-canvas"></canvas>
		</div>
		<span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleClose">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleSaveCanvas">确 定</el-button>
            </span>
	</el-dialog>
</template>

<script>
	export default {
		name: "drawImageModule",
		data() {
			return {
				picDialog: {
					id: null,
					visible: false,
					title: ""
				},
				drawRect: {
					canvas: null,
					flag: false,
					scale: 1,
					start: null,
					last: null,
					width: 0,
					height: 0,
					o_startX: 0,
					o_startY: 0,
					list: []
				},
				img: null,
				url: null
			}
		},
		props: {
			imageInfo: {
				type: Object
			}
		},
		watch: {
			imageInfo: {
				handler(val) {
					console.log(val);
					this.drawRect.list = [];
					this.picDialog.id = val.id;
					this.picDialog.visible = val.visible;
					if (val.actionType === 2) {
						this.picDialog.title = "添加资源位";
					}
					// else if (val.actionType === 3) {
					// 	this.picDialog.title = "添加展位";
					// }
					this.handleNextTick();
				},
				deep: true
			}
		},
		mounted() {
		},
		methods: {
			// dom加载完成
			handleNextTick() {
				this.$nextTick(() => {
					let drawCanvas = this.$refs.drawCanvas;
					this.handleDraw();
					this.drawRect.canvas = drawCanvas;
					drawCanvas.addEventListener("mousedown", (e) => {
						this.drawRect.flag = true;
						this.drawRect.start = [e.offsetX, e.offsetY];
					});
					drawCanvas.addEventListener("mouseup", () => {
						this.drawRect.flag = false;
						let {start, width, height, scale} = this.drawRect;
						this.drawRect.list.push({
							start_x: start[0] / scale,
							start_y: start[1] / scale,
							width,
							height
						});
						this.drawRect.start = null;
					});
					drawCanvas.addEventListener("mouseout", () => {
						this.drawRect.flag = false;
					});
					drawCanvas.addEventListener("mousemove", (e) => {
						this.handleCanvasMove(e);
					});
				})
			},
			// canvas初始化
			handleDraw() {
				let drawCanvas = this.$refs.drawCanvas;
				let img = new Image();
				img.src = this.imageInfo.imageUrl;
				let that = this;
				img.onload = function () {
					drawCanvas.width = img.width;
					drawCanvas.height = img.height;
					drawCanvas.style.width = "500px";
					let scale = 500 / img.width;
					that.drawRect.scale = scale;
					drawCanvas.style.height = img.height * scale + "px";
					let ctx = drawCanvas.getContext("2d");
					ctx.drawImage(img, 0, 0);
					that.img = img;
				}
			},
			// 鼠标移动
			handleCanvasMove(e) {
				let {flag} = this.drawRect;
				if (flag) {
					let img = this.img;
					let {start, width, height, scale, list} = this.drawRect;
					let ctx = this.drawRect.canvas.getContext("2d");
					ctx.clearRect(0, 0, this.drawRect.canvas.width, this.drawRect.canvas.height);
					ctx.drawImage(img, 0, 0);
					list.forEach((item) => {
						ctx.strokeRect(item.start_x, item.start_y, item.width, item.height);
					});
					ctx.beginPath();
					ctx.strokeStyle = "red";
					ctx.lineWidth = 4;
					width = (e.offsetX - start[0]) / scale, height = (e.offsetY - start[1]) / scale;
					ctx.strokeRect(start[0] / scale, start[1] / scale, width, height);
					this.drawRect.width = width;
					this.drawRect.height = height;
				}
			},
			// 保存绘图
			handleSaveCanvas() {
				// let src = this.drawRect.canvas.toDataURL('image/png', 0.4);
				this.$emit("imagePosition", {
					iconPosition: this.drawRect.list
				});
				this.picDialog.visible = false;
			},
			handleClose() {
				this.$emit("imagePosition", {
					iconPosition: null
				});
				this.picDialog.visible = false;
			}
		}
	}
</script>

<style lang="scss">
	.draw-dialog {
		.el-dialog__body {
			.tip {
				padding: 8px;
				background: #e2f9eb;
				border-radius: 3px;
				border: 1px solid #8ce6b0;
			}

			.draw-img {
				width: 100%;
				box-sizing: border-box;
				padding: 20px;
				text-align: center;
			}
		}
	}
</style>
